/**
* 租赁变更
*/
import ampub from 'ampub';
import fa from 'fa';
import moment from 'moment';
import { base } from 'nc-lightapp-front';
import zhCN from 'rc-calendar/lib/locale/zh_CN';
import { Component } from 'react';
import { queryTaxRatePromise } from "../card/events";
import leaseChangeButtonClick, { updateBtnDisabled } from '../card/events/leaseChangeButtonClick';
import constants from '../constants';
import './LeaseChange.less';


const {
    components: { AMRefer },
    utils,
} = ampub;

const { fa_components: { AccbookAndPeriod: { getAccbooksAndPeriods } } } = fa;
const { NCCheckbox, NCRadio, NCNumber, NCTZDatePickerStart, NCTZDatePickerEnd } = base;
const { utils: { msgUtils: { showMessage }, multiLangUtils: { getMultiLangByID } } } = ampub;
const {
	AREA: { CARD: { LEASE_CHANGE_TAB: lease_change_tab, BASIC_INFO_AREA: basicInfoForm } },
	CARD_BTNS: { TABLE_HEAD: { LEASE_CHANGE_TAB: { DELETE_LINE } } }
} = constants;

export default class LeaseChange extends Component {
	constructor(props) {
		super(props);
		let { form, leaseChangeNewData, bill_source_4A3A, originvalue_digit, transiTypeAry, lockcards } = props;

		this.bill_source_4A3A = bill_source_4A3A;
        this.transiTypeAry = transiTypeAry;
        this.lockcards = lockcards;

		this.state = {
            change_date: leaseChangeNewData.change_date && leaseChangeNewData.change_date.value, //生效日期
            interest_rate: leaseChangeNewData.interest_rate && leaseChangeNewData.interest_rate.value, //年折现率
            rent_standard: leaseChangeNewData.rent_standard && leaseChangeNewData.rent_standard.value, //租金标准
            purchase_price: leaseChangeNewData.purchase_price && leaseChangeNewData.purchase_price.value, //购买价格
            ending_date: leaseChangeNewData.ending_date && leaseChangeNewData.ending_date.value, //租赁截止期
            relet_ending_date: leaseChangeNewData.relet_ending_date && leaseChangeNewData.relet_ending_date.value, //续租截止期
            step_rent: leaseChangeNewData.step_rent && leaseChangeNewData.step_rent.value, //阶梯租金
            renewal_flag: leaseChangeNewData.renewal_flag && leaseChangeNewData.renewal_flag.value, //续租选择权中是否执行的选择
            purchase_choice: leaseChangeNewData.purchase_choice && leaseChangeNewData.purchase_choice.value, //购买选择权中是否执行的选择

            originvalue_digit: originvalue_digit, //精度
            rent_standard_disabled: false, // 租金标准禁用状态
            step_rent_disabled: false, // 阶梯租金禁用状态

            // 税额可抵扣
            tax_deductible: leaseChangeNewData.tax_deductible.value,
            // 税码
            tax_code: leaseChangeNewData.tax_code.value,
            // 税率
            tax_rate: leaseChangeNewData.tax_rate.value,

            tax_code_ref: { refname: leaseChangeNewData.tax_code.display, refpk: leaseChangeNewData.tax_code.value }
        };


		// 初始化为阶梯租金开关
		this.state.rent_standard_disabled = this.state.step_rent;
		this.mainbookMinUnclosePeriod = null; //主账簿最小未结账月
		this.mainbookMinUncloseBeginDate = null; //主账簿最小未结账月开始日期
		this.mainbookMinUncloseEndDate = null; //主账簿最小未结账月结束日期

		/* 精度控制 */
		props.editTable.setColScale([
			{ areacode: lease_change_tab, fieldcode: 'rent', scale: this.state.originvalue_digit }
		]);

		this.setStatus.bind(this);
		this.stepRentBeforeEvent.bind(this);
		this.stepRentAfterEvent.bind(this);
		this.inMinUnclosePeriod.bind(this);

        // 税码参照
		this.taxCodeRef = {
            disabled: false,
            isMultiSelectedEnabled: false,
            // defaultValue: { refname: leaseChangeNewData.tax_code.display, refpk: leaseChangeNewData.tax_code.value },
            defaultValue: this.state.tax_code_ref,
            // defaultValue: [],
            onChange: async (value) => {
                if (!value || Object.keys(value).length === 0) {
                    Object.assign(this.state.tax_code_ref, { refname: null, refpk: null });
                } else {
                    Object.assign(this.state.tax_code_ref, value);
                }
                // label: "CN09/一般纳税货品增值税（16%）"
                // refcode: "CN09"
                // refname: "一般纳税货品增值税（16%）"
                // refpk: "1002Z010000000002QHK"
                // values: {}
                let refpk = value.refpk;
                if (refpk) {
                    let tax = await queryTaxRatePromise(refpk);
                    this.setState({ tax_rate: tax, tax_code: refpk }, () => {
                        this.onAfterEvent(refpk, 'tax_code');
                        this.onAfterEvent(tax, 'tax_rate');
                    });
                } else {
                    this.setState({ tax_rate: null, tax_code: null }, () => {
                        this.onAfterEvent(null, 'tax_code');
                        this.onAfterEvent(null, 'tax_rate');
                    });
                }
            },
            refcode: "uapbd/refer/pub/TaxcodeDefaultGridRef/index",
            queryCondition: () => {}
        };
	}

	componentDidMount() {
		this.setStatus();
	}

    componentWillMount() {
		// 监听浏览器关闭
		window.onbeforeunload = () => {
			// 解锁卡片
            if (!!window.ActiveXObject || 'ActiveXObject' in window) {
                //IE11浏览器（同步解锁）
                this.lockcards('unlock', false);
            } else {
                //其它浏览器（异步解锁）
                this.lockcards('unlock', true);
            }
			//浏览器回退键
			if (window.history && window.history.pushState) {
				window.onpopstate = () => {
					this.lockcards('unlock', false);
				};
			}
		};

		//关闭浏览器页签事件
		window.onunload = () => {
			// 清除自定义缓存
			this.transiTypeAry.map((transiTypeVo) => {
				cardCache.setDefData(transiTypeVo.pk_billtypecode, constants.templateDataSource, '');
			});
		};
	}

	// 移除事件
	componentWillUnmount() {
		window.onbeforeunload = null;
	}

	componentWillReceiveProps(nextProps) {
		this.setState({ originvalue_digit: nextProps.originvalue_digit });
	}

    /**
     * 是否在最小未结账月
     * 
     * @param {*} changeDate 
     * @returns 
     */
    inMinUnclosePeriod(props, changeDate){
        if (this.mainbookMinUncloseBeginDate.isAfter(changeDate) || this.mainbookMinUncloseEndDate.isBefore(changeDate)) {
            /* "生效日期必须在最小未结账月{mainbookMinUnclosePeriod}！ */
            showMessage(props, {
                content: getMultiLangByID('201201504A-0000106', { mainbookMinUnclosePeriod: this.mainbookMinUnclosePeriod }),
                color: 'warning'
            });
            return false;
        }
        return true;
    }

	/**
     * 
     * @param {新值} value 
     * @param {变更域} field 
     * @param {阶梯计租传递性} transitivity 
     */
     onAfterEvent = (value, field, transitivity = true) => {
		const { props: { form, updateParent, editTable } } = this;
		this.setState({ [field]: value });
		updateParent(value, field);

		/* 续租选择权 */
		if ('renewal_flag' === field) {
			// 取消续租选择权，清空续租日期
			if (!value) {
				this.setState({ relet_ending_date: '' });
				updateParent('', 'relet_ending_date');
			}
		}
		/* 购买选择权 */
		if ('purchase_choice' === field) {
			// 取消续租选择权，清空购买价格
			if (!value) {
				this.setState({ purchase_price: '' });
				updateParent('', 'purchase_price');
			}
		}

		/* 按阶梯租金计租-同步止租日期 */
		let step_lease_flag = form.getFormItemsValue(basicInfoForm, 'step_lease_flag').value;
		if (transitivity === true && step_lease_flag === true) {
			const size = editTable.getNumberOfRows(lease_change_tab);
			/* 续租选择权 */
			if ('renewal_flag' === field) {
				if (!value) {
					editTable.setValByKeyAndIndex(lease_change_tab, size - 1, 'end_date', { value: '' });
				}
			}
			/* 续租截止期 */
			if ('relet_ending_date' === field) {
				editTable.setValByKeyAndIndex(lease_change_tab, size - 1, 'end_date', { value: value });
			}
			/* 租赁截止期 */
			if ('ending_date' === field) {
				editTable.setValByKeyAndIndex(lease_change_tab, size - 1, 'end_date', { value: value });
			}
		}
	};

	//阶梯租金勾选
	changeCheck = () => {
		const { props, props: { form, updateParent, editTable, cardTable } } = this;
		let step_rent = !this.state.step_rent;

		this.setState({ step_rent: step_rent });
		this.setState({ rent_standard_disabled: step_rent });
		updateParent(step_rent, 'step_rent');

		/* 初始化阶梯租金表格状态 */
		updateBtnDisabled.call(this, step_rent);
		/* 初始化阶梯租金删行按钮状态 */
		this.onSelectedChange();

		if (step_rent) {
			// 勾选阶梯租金，清空租金标准
			this.setState({ rent_standard: '' });
			updateParent('', 'rent_standard');

			const size = editTable.getNumberOfRows(lease_change_tab);
			if (!size) {
				let starting_date = form.getFormItemsValue(basicInfoForm, 'starting_date').value;
				editTable.addRow(lease_change_tab, 0, false, { start_date: { value: starting_date } });
			}
		} else {
			editTable.setTableData(lease_change_tab, { rows: [] });
		}
	};

	/* 阶梯租金删行按钮控制 */
	onSelectedChange = () => {
        const { props: { editTable, button } } = this;
        /* 资产租入合同，禁用删行按钮控制 */
        if(this.bill_source_4A3A){
            return ;
        }

		let checkedRows = [];
		let num = editTable.getNumberOfRows(lease_change_tab, false);
		if (num > 0) {
			checkedRows = editTable.getCheckedRows(lease_change_tab);
		}
		button.setButtonDisabled([ DELETE_LINE ], !(checkedRows && checkedRows.length));
	};

	/**
     * 编辑前事件处理
     * 
     * @param {内部方法} props 
     * @param {区域id} moduleId 
     * @param {模版当前列的项} item 
     * @param {当前索引} index 
     * @param {当前值} value 
     * @param {行数据} record 
     * @returns 
     */
	stepRentBeforeEvent(props, moduleId, item, index, value, record) {
		const { form, editTable } = props;
		const { attrcode: field } = item;
		/* 开始月份 */
		if ('start_date' === field) {
			/* 按阶梯租金计租 */
			let step_lease_flag = form.getFormItemsValue(basicInfoForm, 'step_lease_flag').value;
			if (step_lease_flag === true) {
				if (index === 0) {
					/* 国际化：按阶梯租金计租，不允许修改第一行的开始月份（起租日期）！ */
					showMessage(props, { content: getMultiLangByID('201201504A-0000103'), color: 'warning' });
					return false;
				}
			}
		}

		/* 按阶梯租金计租 */
		let step_lease_flag = form.getFormItemsValue(basicInfoForm, 'step_lease_flag').value;
		if (step_lease_flag === true) {
			if (!this.state.change_date) {
				/* 生效日期不允许为空！ */
				showMessage(props, { content: getMultiLangByID('201201504A-000083'), color: 'warning' });
				return false;
			}
			let changeDate = moment(this.state.change_date, 'YYYY-MM');
			if (!this.inMinUnclosePeriod(props, changeDate)) {
				return false;
			}

            let start_date = editTable.getValByKeyAndIndex(lease_change_tab, index, 'start_date').value;
            if (start_date) {
                const val = moment(start_date, 'YYYY-MM');
                if (val.isBefore(this.mainbookMinUncloseBeginDate)) {
                    /* 早于最小未结账月的阶梯租金不能变更！ */
                    showMessage(props, { content: getMultiLangByID('201201504A-0000107'), color: 'warning' });
                    return false;
                }
            }
		}
		return true;
	}



	/**
     * 阶梯租金编辑后
     * 
     * @param {内部方法} props 
     * @param {区域id} moduleId 
     * @param {操作的键} field 
     * @param {当前值} newValue 
     * @param {新旧值集合} changedrows 
     * @param {当前index} index 
     * @returns 
     */
	stepRentAfterEvent = (props, moduleId, field, newValue, changedrows, index) => {
		const { editTable, form } = props;

		if ('rent' === field) {
			if (newValue) {
				const rows = editTable.getNumberOfRows(lease_change_tab);
				if (rows == index + 1) {
					editTable.addRow(lease_change_tab);
				}
				let lastEndDate = editTable.getValByKeyAndIndex(lease_change_tab, index, 'end_date').value;
				if(lastEndDate) {
					let nextDate = moment(lastEndDate, 'YYYY-MM-DD HH:mm:ss').add(1, 'd').format('YYYY-MM-DD HH:mm:ss');
					editTable.setValByKeyAndIndex(lease_change_tab, index + 1, 'start_date', { value: nextDate });
				}
			}
		}

		/* 开始月份与结束月份校验 */
		if ([ 'start_date', 'end_date' ].includes(field)) {
			let start_date = editTable.getValByKeyAndIndex(lease_change_tab, index, 'start_date').value;
			let end_date = editTable.getValByKeyAndIndex(lease_change_tab, index, 'end_date').value;
			if (start_date && end_date) {
				let start = moment(start_date, 'YYYY-MM-DD');
				let end = moment(end_date, 'YYYY-MM-DD');
				if (start.isAfter(end)) {
					/* "201201504A-0000105": "阶梯租金结束月份不能早于开始月份！" */
					showMessage(props, { content: getMultiLangByID('201201504A-0000105'), color: 'warning' });
					if (field === 'start_date') {
						editTable.setValByKeyAndIndex(lease_change_tab, index, 'start_date', { value: '' });
					}
					if (field === 'end_date') {
						editTable.setValByKeyAndIndex(lease_change_tab, index, 'end_date', { value: '' });
					}
					return;
				}
			}
		}

		/* 按阶梯租金计租 */
		let step_lease_flag = form.getFormItemsValue(basicInfoForm, 'step_lease_flag').value;
		if (step_lease_flag === true) {
			const { oldvalue } = changedrows;
			let changeDate = moment(this.state.change_date, 'YYYY-MM-DD');
			let endDate = this.state.relet_ending_date || this.state.ending_date;
			if ([ 'end_date' ].includes(field)) {
				if (endDate) {
					const end = moment(endDate, 'YYYY-MM-DD');
					if (end.isBefore(changeDate)) {
						/* 租赁截止日期不能早于生效日期！ */
						showMessage(props, { content: getMultiLangByID('201201504A-0000108'), color: 'warning' });
						editTable.setValByKeyAndIndex(lease_change_tab, index, field, oldvalue);
						return false;
					}
				}
				if (newValue) {
					const val = moment(newValue, 'YYYY-MM-DD');
					if (val.isBefore(changeDate)) {
						/* 租赁截止日期不能早于生效日期！ */
						showMessage(props, { content: getMultiLangByID('201201504A-0000108'), color: 'warning' });
						editTable.setValByKeyAndIndex(lease_change_tab, index, field, oldvalue);
						return false;
					}
				}
			}
			if ([ 'rent' ].includes(field)) {
				let end_date = editTable.getValByKeyAndIndex(lease_change_tab, index, 'end_date').value;
				if (endDate) {
					const end = moment(endDate, 'YYYY-MM-DD');
					if (end.isBefore(changeDate)) {
						/* 早于生效日期的阶梯租金不能变更！ */
						showMessage(props, { content: getMultiLangByID('201201504A-0000109'), color: 'warning' });
						editTable.setValByKeyAndIndex(lease_change_tab, index, field, oldvalue);
						return false;
					}
				}
				if (end_date) {
					const val = moment(end_date, 'YYYY-MM-DD');
					if (val.isBefore(changeDate)) {
						/* 早于生效日期的阶梯租金不能变更！ */
						showMessage(props, { content: getMultiLangByID('201201504A-0000109'), color: 'warning' });
						editTable.setValByKeyAndIndex(lease_change_tab, index, field, oldvalue);
						return false;
					}
				}
			}
		}

		if ('end_date' === field) {
			const rows = editTable.getNumberOfRows(lease_change_tab);
			let lastRent = editTable.getValByKeyAndIndex(lease_change_tab, index, 'rent').value;
			if (newValue && lastRent) {
				if (rows == index + 1) {
					editTable.addRow(lease_change_tab);
				}
				let nextDate = moment(newValue, 'YYYY-MM-DD HH:mm:ss').add(1, 'd').format('YYYY-MM-DD HH:mm:ss');
				editTable.setValByKeyAndIndex(lease_change_tab, index + 1, 'start_date', { value: nextDate });
			}

			/* 按阶梯租金计租 */
			let step_lease_flag = form.getFormItemsValue(basicInfoForm, 'step_lease_flag').value;
			if (step_lease_flag === true) {
				// let end_date = editTable.getValByKeyAndIndex(lease_change_tab, rows - 1, 'end_date').value;
				if (!newValue) {
					return;
				}

				/* 同步表头的止租日期 */
				if (rows === index + 1) {
					/* 续租选择权 */
					if (this.state.renewal_flag) {
						/* 续租截止期 */
						this.setState({ relet_ending_date: newValue });
						this.onAfterEvent(newValue, 'relet_ending_date', false);
					} else {
						/* 租赁截止期 */
						this.setState({ ending_date: newValue });
						this.onAfterEvent(newValue, 'ending_date', false);
					}
				}
			}
		}
	};

	setStatus() {
		const { props: { form, editTable } } = this;
		let that = this;
		/* 按阶梯租金计租 */
		let step_lease_flag = form.getFormItemsValue(basicInfoForm, 'step_lease_flag').value;
		if (step_lease_flag === true) {
			this.setState({ step_rent_disabled: true });
		}

		/* 按阶梯租金计租，第一行不允许选中且删行按钮不允许点击 */
		editTable.setCheckboxDisabled(lease_change_tab, 0, true);
		editTable.setEditableRowKeyByIndex(lease_change_tab, 0, [ 'start_date' ], false);

		let pk_org = form.getFormItemsValue(basicInfoForm, 'pk_org').value;
		/* 获取最小未结账月 */
		getAccbooksAndPeriods(pk_org, (res) => {
			let { success, data } = res;
			if (success && data && data.length) {
				//主账簿排在前面
				data.sort((a1, a2) => {
					if (a1.isMainbook && !a2.isMainbook) {
						return 1;
					} else if (!a1.isMainbook && a2.isMainbook) {
						return -1;
					} else {
						return 0;
					}
				});
				let [ { minUnClosebookPeriod: { accyear, period, startdate, enddate } } ] = data;
				that.mainbookMinUnclosePeriod = moment(accyear + period, 'YYYY-MM').format('YYYY-MM');
				that.mainbookMinUncloseBeginDate = moment(startdate, 'YYYYMM');
				that.mainbookMinUncloseEndDate = moment(enddate, 'YYYYMM');
			}
		});
	}

	//选择日期的回调函数
	onSelect = () => {};

	render() {
		return (
			<div id="leaseChangeModal">
				<div className="formArea">
					<div>
						<ul>
							<li>
								<div>{getMultiLangByID('201201504A-000066') /*国际化处理：生效日期*/}</div>
								<div>
									<span className="effect">{getMultiLangByID('201201504A-000066')}</span>
									<NCTZDatePickerStart
										onSelect={this.onSelect}
										onChange={(value) => {
											this.onAfterEvent(value, 'change_date');
										}}
										locale={zhCN}
										value={this.state.change_date}
										placeholder={getMultiLangByID('201201504A-000067') /*国际化处理：选择日期*/}
									/>
								</div>
							</li>
						</ul>
					</div>
					<div>
						<ul>
							<li>
								<div>{getMultiLangByID('201201504A-000068') /*国际化处理：年折现率*/}</div>
								<div>
									<span className="Discount">
										{getMultiLangByID('201201504A-000069') /*国际化处理：年折现率(%)*/}
									</span>
									<NCNumber
										iconStyle="one"
										min={0}
										// max={10000}
										value={this.state.interest_rate}
										onChange={(value) => {
											this.onAfterEvent(value, 'interest_rate');
										}}
										scale={2}
									/>
								</div>
							</li>
							<li>
								<div>{getMultiLangByID('201201504A-000070') /*国际化处理：租金变更*/}</div>
								<div>
									<span className="rentStandard">
										{getMultiLangByID('201201504A-000071') /*国际化处理：租金标准*/}
									</span>
									<NCNumber
										iconStyle="one"
										min={0}
										// max={10000}
										value={this.state.rent_standard}
										onChange={(value) => {
											this.onAfterEvent(value, 'rent_standard');
										}}
										scale={this.state.originvalue_digit}
										disabled={this.bill_source_4A3A || this.state.rent_standard_disabled}
									/>
									<NCCheckbox
										onChange={this.changeCheck}
										checked={this.state.step_rent}
										disabled={this.bill_source_4A3A || this.state.step_rent_disabled}
									>
										{getMultiLangByID('201201504A-000072') /*国际化处理：阶梯租金*/}
									</NCCheckbox>
								</div>
							</li>
							<li>
								<div>{getMultiLangByID('201201504A-000073') /*国际化处理：租期变更*/}</div>
								<div>
									<span className="deadline">{getMultiLangByID('201201504A-000074') /*国际化处理：租赁截止期*/}</span>
									<NCTZDatePickerEnd
										onSelect={this.onSelect}
										onChange={(value) => {
											this.onAfterEvent(value, 'ending_date');
										}}
										locale={zhCN}
										value={this.state.ending_date}
										placeholder={getMultiLangByID('201201504A-000067')} /*国际化处理：选择日期*/
										disabled={this.bill_source_4A3A}
									/>
								</div>
							</li>
						</ul>
					</div>
					<div>
						<ul>
							<li>
								<div>{getMultiLangByID('201201504A-000075') /*国际化处理：续租选择权*/}</div>
								<div>
									<div>{getMultiLangByID('201201504A-000075') /*国际化处理：续租选择权*/}</div>
									<NCRadio.NCRadioGroup
										selectedValue={this.state.renewal_flag}
										onChange={(value) => {
											this.onAfterEvent(value, 'renewal_flag');
										}}
									>
										<NCRadio value={true} disabled={this.bill_source_4A3A}>
											{getMultiLangByID('201201504A-000076') /*国际化处理：执行*/}
										</NCRadio>
										<NCRadio value={false} disabled={this.bill_source_4A3A}>
											{' '}
											{getMultiLangByID('201201504A-000077') /*国际化处理：取消执行*/}
										</NCRadio>
									</NCRadio.NCRadioGroup>
								</div>
								<div style={{display:"inline-flex"}}>
									<span className="rentDead">{getMultiLangByID('201201504A-000078') /*国际化处理：续租截止期*/}</span>
									<NCTZDatePickerEnd
										onSelect={this.onSelect}
										onChange={(value) => {
											this.onAfterEvent(value, 'relet_ending_date');
										}}
										locale={zhCN}
										value={this.state.relet_ending_date}
										placeholder={getMultiLangByID('201201504A-000067') /*国际化处理：选择日期*/}
										disabled={!(this.state.renewal_flag && !this.bill_source_4A3A)}
									/>
								</div>
							</li>
							<li className="buySelect">
								<div>{getMultiLangByID('201201504A-000079') /*国际化处理：购买选择权*/}</div>
								<div>
									<div>{getMultiLangByID('201201504A-000079') /*国际化处理：购买选择权*/}</div>
									<NCRadio.NCRadioGroup
										selectedValue={this.state.purchase_choice}
										onChange={(value) => {
											this.onAfterEvent(value, 'purchase_choice');
										}}
									>
										<NCRadio value={true} disabled={this.bill_source_4A3A}>
											{getMultiLangByID('201201504A-000076') /*国际化处理：执行*/}
										</NCRadio>
										<NCRadio value={false} disabled={this.bill_source_4A3A}>
											{' '}
											{getMultiLangByID('201201504A-000077') /*国际化处理：取消执行*/}
										</NCRadio>
									</NCRadio.NCRadioGroup>
								</div>
								<div>
									<span className="price">{getMultiLangByID('201201504A-000080') /*国际化处理：购买价格*/}</span>
									<NCNumber
										iconStyle="one"
										min={0}
										// max={10000}
										value={this.state.purchase_price}
										onChange={(value) => {
											this.onAfterEvent(value, 'purchase_price');
										}}
										scale={this.state.originvalue_digit}
										/* precision={this.state.originvalue_digit} */
										disabled={!(this.state.purchase_choice && !this.bill_source_4A3A)}
									/>
                                     <div className="visibilitySpace">
                                        <NCCheckbox>
                                            {getMultiLangByID('201201504A-000072') /*仅仅为了占位：阶梯租金*/}
                                        </NCCheckbox>
                                    </div>
								</div>
                               
                            </li>
                            <li>
                                <div>{getMultiLangByID('201201504A-0000115') /*国际化处理：税率变更*/}</div>
                                <div>
                                    <span className="Discount">
                                        {getMultiLangByID('201201504A-0000116') /*国际化处理：税码*/}
                                    </span>
                                    <AMRefer className="ref title-search-detail" config={this.taxCodeRef} />
                                </div>
                                <div>
                                    <span className="Discount">
                                        {getMultiLangByID('201201504A-0000117') /*国际化处理：税率（%）*/}
                                    </span>
                                    <NCNumber
                                        iconStyle="one"
                                        min={0}
                                        max={100}
                                        value={this.state.tax_rate}
                                        onChange={(value) => {
                                            this.onAfterEvent(value, 'tax_rate');
                                        }}
                                        scale={2}
                                    />
                                    <NCCheckbox
                                        onChange={(value) => {
                                            this.onAfterEvent(value, 'tax_deductible');
                                        }}
                                        checked={this.state.tax_deductible}
                                        disabled={this.bill_source_4A3A}
                                    >
                                        {getMultiLangByID('201201504A-0000118') /*国际化处理：税额可抵扣*/}
                                    </NCCheckbox>

								</div>
							</li>
						</ul>
					</div>
				</div>
				<div className="btn-group">
					<div className="header-button-area">
						{this.props.button.createButtonApp({
							//按钮区域（在数据库中注册的按钮区域）
							area: 'card_body5',
							//按钮数量限制，超出指定数量的按钮将放入更多显示
							buttonLimit: 3,
							onButtonClick: leaseChangeButtonClick.bind(this),
							//指定下拉弹窗渲染的位置，不设置的话，下拉弹窗随滚动条滚动
							popContainer: document.querySelector('.header-button-area')
						})}
					</div>
				</div>
                <div className="clearboth"></div>
				<div className="table-area">
					{this.props.editTable.createEditTable(lease_change_tab, {
						selectedChange: this.onSelectedChange,
						onBeforeEvent: this.stepRentBeforeEvent.bind(this),
						onAfterEvent: this.stepRentAfterEvent.bind(this),
						showCheck: true,
						showIndex: true
					})}
				</div>
			</div>
		);
	}
}
